<%--
  Created by IntelliJ IDEA.
  User: chenxiaojun
  Date: 2020/6/1
  Time: 9:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="true"%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<html>
<head>
    <title>商品列表</title>
    <%@include file="/common/header.jsp"%>
    <style type="text/css">
        .img{
            width:200px;
            height:200px;
            background-repeat:no-repeat;
            background-size:cover;
            background-position:center;
        }
    </style>
</head>
<body>
<div id="root">
    <Collapse>
        <Panel name="1">
            条件查询
            <p slot="content">
                <i-form :label-width="60" inline>
                    <Form-Item label="商品名称">
                        <i-input v-model="comVo.name"></i-input>
                    </Form-Item>
                    <Form-Item label="商品货号">
                        <i-input v-model="comVo.productSn" clearable  style="width: 120px;"></i-input>
                    </Form-Item>
                    <Form-Item label="商品分类">
                        <i-Select v-model="comVo.productCategoryId" clearable  style="width: 120px;">
                            <i-Option v-for="item in sortList" :value="item.id" :key="item.id">{{item.sortName}}</i-Option>
                        </i-Select>
                    </Form-Item>
                    <Form-Item label="商品品牌">
                        <i-Select v-model="comVo.brandId" clearable  style="width: 120px;">
                            <i-Option v-for="item in brandList" :value="item.id" :key="item.id">{{item.name}}</i-Option>
                        </i-Select>
                    </Form-Item>
                    <Form-Item label="上架状态">
                        <i-Select v-model="comVo.publishStatus" clearable  style="width: 120px;">
                            <i-Option v-for="item in labelList" :value="item.value" :key="item.value">{{item.label}}</i-Option>
                        </i-Select>
                    </Form-Item>
                    <Form-Item label="审核" :label-width="40">
                        <i-Select v-model="comVo.verifyStatus" clearable  style="width: 120px;">
                            <i-Option v-for="item in verifyList" :value="item.value" :key="item.value">{{item.label}}</i-Option>
                        </i-Select>
                    </Form-Item>
                    <i-button type="primary" @click="pageNo=1;getList();" >搜索</i-button>
                </i-form>
            </p>
        </Panel>
    </Collapse>
    <Card style="margin: 20px 0" >

        <Icon type="ios-film-outline"></Icon>
        数据列表
        <shiro:hasPermission name="com:add">
            <i-button type="primary" @click="add()":style="{float:'right'}">添加</i-button>
        </shiro:hasPermission>
        <shiro:hasPermission name="com:examine">
            <i-button type="primary" @click="recovery()":style="{float:'right',margin:'0 20px'}">回收站</i-button>
        </shiro:hasPermission>
    </Card>
    <i-table :columns="columns" :data="data" @on-selection-change="tableSelect=arguments[0]" border stripe height="450">
        <template slot-scope="scope" slot="pic"><img width="100px" height="100px" :src="scope.row.pic"></template>
        <template slot-scope="scope" slot="name">商品名称: {{ scope.row.name }} <br/>品牌: {{ scope.row.brand.name }}</template>
        <template slot-scope="scope" slot="price">价格: {{ scope.row.price }} <br>货号: {{ scope.row.productSn }}</template>
        <template slot-scope="{row,index}" slot="publishStatus">
            <div v-if="row.verifyStatus==1">
                <i-switch :value="row.publishStatus == 0?false:true" @on-change="change(row,index)" />
            </div>
            <div v-if="row.verifyStatus!=1">
                <i-switch :value="row.publishStatus == 0?false:true" @on-change="change(row,index)"  disabled />
            </div>
        </template>
        <template slot-scope="{row,index}" slot="verifyStatus">
            {{ row.verifyStatus == 0 ? '未审核' : (row.verifyStatus==1 ? '审核通过' : '审核拒绝') }}
            <shiro:hasPermission name="com:examine">
                <p v-if="row.verifyStatus == 0"><i-button @click="exa(row)">审核</i-button></p>
                <%--<p v-if="row.verifyStatus != 0"><i-button @click="exaview(row)">审核详情</i-button></p>--%>
            </shiro:hasPermission>
        </template>
        <%--<template slot-scope="scope" slot="kucun"><i-button type="default" style="margin-left: 1100px" @click="stockList">库存</i-button></template>--%>
        <template slot-scope="{row,index}" slot="kucun">
            <i-Button type="info" size="large" @click="stockList(row,index)">库存</i-Button>
        </template>
        <template slot-scope="{row,index}" slot="action">
            <i-Button type="info" size="large" @click="comList(row,index)">查看</i-Button>
            <shiro:hasPermission name="com:update">
                <i-Button type="info" size="large" @click="edit(row,index)">编辑</i-Button>
            </shiro:hasPermission>
            <shiro:hasPermission name="com:del">
                <i-Button type="info" size="large" @click="del(row,index)">删除</i-Button>
            </shiro:hasPermission>
        </template>

    </i-table>
    <template>
        <Page :total="total1"
              show-elevator
              :page-size="pageSize"
              :current.sync="pageNo"
              show-total
              show-sizer
              :page-size-opts="[5,10,15,20]"
              style="margin-left: 30%;"
              @on-page-size-change="pageSize=arguments[0];getList();"
              @on-change="getList"/>
    </template>
    <Modal v-model="modalstockList"  title="库存查看" @on-ok="" width="1000px">
        <i-form :label-width="80">
            <Form-Item label="库存编号">
                <i-input  v-model="Stock.stockCode" style="width: 120px;">
                </i-input>
                <span @click="getsk">
                    <Icon type="md-search" size="20" ></Icon>
                </span>
                <i-button :style="{float:'right'}" @click="kcadd()">添加</i-button>
            </Form-Item>
        </i-form>
        <i-form>
            <i-table :columns="skcolumns" :data="skdata"  border stripe :height="cd">

                    <template slot-scope="scope" slot="stockCode">
                        <Form-Item>
                            <i-input  v-model="scope.row.stockCode" style="width: 120px;"></i-input>
                        </Form-Item>
                    </template>
                    <template slot-scope="scope" slot="stockMoney">
                        <Form-Item>
                            <i-input  v-model="scope.row.stockMoney" style="width: 120px;"></i-input>
                        </Form-Item>
                    </template>
                    <template slot-scope="scope" slot="stockNumber">
                        <Form-Item>
                            <i-input  v-model="scope.row.stockNumber" style="width: 120px;"></i-input>
                        </Form-Item>
                    </template>
                    <template slot-scope="scope" slot="stockPolice">
                        <Form-Item>
                            <i-input  v-model="scope.row.stockPolice" style="width: 120px;"></i-input>
                        </Form-Item>
                    </template>
                    <template slot-scope="{row,index}" slot="action">
                        <i-Button type="info"  @click="skupdate(row)">修改</i-Button>
                        <i-Button type="error"  @click="delkc(row)">删除</i-Button>
                    </template>



            </i-table>
        </i-form>
    </Modal>
    <Modal  v-model="modalcomList"  title="编辑" @on-ok="doedit(row)" @on-cancel="noupdate">
        <i-form :label-width="80">
            <Form-Item label="商品编号">
                <i-input disabled  v-model="Commodity.id" ></i-input>
            </Form-Item>
            <Form-Item label="商品品牌">
                <i-Select v-model="Commodity.brandId" clearable disabled style="width: 120px;">
                    <i-Option v-for="item in brandList" :value="item.id" :key="item.id">{{item.name}}</i-Option>
                </i-Select>
            </Form-Item>
            <Form-Item label="商品分类">
                <i-Select v-model="Commodity.productCategoryId" clearable  style="width: 120px;">
                    <i-Option v-for="item in sortList" :value="item.id" :key="item.id"  v-if="item.sortDisplay==1">{{item.sortName}}</i-Option>
                </i-Select>
            </Form-Item>
            <Form-Item label="商品名称">
                <i-input v-model="Commodity.name"></i-input>
            </Form-Item>
            <Form-Item label="商品图片">
                <img width="100px" height="100px" :src="Commodity.pic">
            </Form-Item>
            <Form-item label="商品图片:">
                <Upload action="/sys/brand/upload" name="attach" :before-upload="handlerBeforeUpload" :multiple="false" :on-success="uploadSuccess" ref="upload" >
                    <i-Button icon="ios-cloud-upload-outline" >上传图片</i-Button>
                </Upload>
                <div class="img" :style="{'background-image':'url(' + img +')'}" v-if="img"></div>
            </Form-item>
            <%--<Form-Item label="商品图片上传">--%>
                <%--<i-Button type="success"  @click="upload(row)">上传</i-Button>--%>
            <%--</Form-Item>--%>
            <Form-Item label="商品货号">
                <i-input v-model="Commodity.productSn" ></i-input>
            </Form-Item>

            <Form-Item label="商品排序">
                <i-input v-model="Commodity.sort" ></i-input>
            </Form-Item>
            <Form-Item label="商品销量">
                <i-input v-model="Commodity.sale" ></i-input>
            </Form-Item>
            <Form-Item label="商品价格">
                <i-input v-model="Commodity.price" ></i-input>
            </Form-Item>
            <Form-Item label="商品库存">
                <i-input v-model="Commodity.stock" ></i-input>
            </Form-Item>
            <Form-Item label="商品预警">
                <i-input v-model="Commodity.lowStock"></i-input>
            </Form-Item>
            <Form-Item label="商品单位">
                <i-input v-model="Commodity.unit"></i-input>
            </Form-Item>

        </i-form>
    </Modal>

    <Modal  v-model="modalkc"  title="添加库存" @on-ok="doaddkc(datakc)" @on-cancel="" width="1000px">
        <i-form :label-width="80">
            <Form-Item label="名称">
                <i-input disabled  v-model="Commodity.name" ></i-input>
            </Form-Item>
            <Checkbox-Group v-model="stockVo.stockColor">
                <Checkbox label="黑色">黑色</Checkbox>
                <Checkbox label="金色">金色</Checkbox>
                <Checkbox label="红色">红色</Checkbox>
                <Checkbox label="银色">银色</Checkbox>
                <Checkbox label="蓝色">蓝色</Checkbox>
                <Checkbox label="浅蓝色">浅蓝色</Checkbox>
                <Checkbox label="灰色">灰色</Checkbox>
                <Checkbox label="白色">白色</Checkbox>
            </Checkbox-Group><br>
            <Checkbox-Group v-model="stockVo.stockBranch" v-if="Commodity.productCategoryId==1">
                <Checkbox label="L">L</Checkbox>
                <Checkbox label="XL">XL</Checkbox>
                <Checkbox label="XXL">XXL</Checkbox>
                <Checkbox label="XXXL">XXXL</Checkbox>
            </Checkbox-Group>
            <Checkbox-Group v-model="stockVo.stockBranch" v-if="Commodity.productCategoryId==2">
                <Checkbox label="16">16G</Checkbox>
                <Checkbox label="32">32G</Checkbox>
                <Checkbox label="64">64G</Checkbox>
            </Checkbox-Group>
            <Checkbox-Group v-model="stockVo.stockBranch" v-if="Commodity.productCategoryId==3">
                <Checkbox label="56英寸">56英寸</Checkbox>
                <Checkbox label="68英寸">68英寸</Checkbox>
            </Checkbox-Group>
            <Checkbox-Group v-model="stockVo.stockBranch" v-if="Commodity.productCategoryId==4">
                <Checkbox label="38码">38码</Checkbox>
                <Checkbox label="39码">39码</Checkbox>
                <Checkbox label="40码">40码</Checkbox>
            </Checkbox-Group>
            <Checkbox-Group v-model="stockVo.stockBranch" v-if="Commodity.productCategoryId==5">
                <Checkbox label="29">29</Checkbox>
                <Checkbox label="30">30</Checkbox>
                <Checkbox label="31">31</Checkbox>
                <Checkbox label="32">32</Checkbox>
                <Checkbox label="33">33</Checkbox>
                <Checkbox label="34">34</Checkbox>
            </Checkbox-Group>

            <i-button  @click="aShua">刷新</i-button>
            <i-form >
                <i-table stripe :columns="columnskc" :data="datakc" :height="kccd">
                    <template slot-scope="{row,index}" slot="stockCode">
                        <Form-Item label="库存编号" prop="code">
                            <i-input v-model="datakc[index].stockCode"></i-input>
                        </Form-Item>
                    </template>
                    <template slot-scope="{row,index}" slot="c">
                        <i-Button type="error" size="large" @click="delkck(row,index)">删除</i-Button>
                    </template>
                    <template slot-scope="{row,index}" slot="stockMoney">
                        <Form-Item label="价格" prop="money">
                            <i-input v-model="datakc[index].stockMoney"></i-input>
                        </Form-Item>
                    </template>
                    <template slot-scope="{row,index}" slot="stockNumber">
                        <Form-Item label="库存数量" prop="number">
                            <i-input v-model="datakc[index].stockNumber"></i-input>
                        </Form-Item>
                    </template>
                    <template slot-scope="{row,index}" slot="stockPolice">
                        <Form-Item label="库存警示" >
                            <i-input v-model="datakc[index].stockPolice"></i-input>
                        </Form-Item>
                    </template>
                </i-table>
            </i-form>


        </i-form>
    </Modal>


    </Modal>
    <%--文件上传   start--%>
    <modal v-model="uploadFlag" title="上传商品图片" @on-ok="uploadAttach">
        <i-form :label-width="80">
            <form-item label="商品图片:">
                <Upload action="sys/com/upload" name="attach" :before-upload="handlerBeforeUpload" :multiple="false" :on-success="uploadSuccess">
                    <i-Button icon="ios-cloud-upload-outline">上传商品图片</i-Button>
                </Upload>
                <div class="img" :style="{'background-image':'url(' + img +')'}" v-if="img"></div>
            </form-item>
        </i-form>
    </modal>
    <%--文件上传   end--%>

</div>

</body>
<script>
    new Vue({
        el:"#root",
        data:{
            columns:[
                // {
                //     type: "selection",
                //     width: 60,
                //     align: "center"
                // },
                {title:"编号",key:"id"},
                {title:"商品图片",slot:"pic"},
                {title:"商品名称/品牌",slot:"name"},
                {title:"商品价格/货号",slot:"price"},
                {title:"是否上架",slot:"publishStatus"},
                {title:"库存",slot:"kucun"},
                {title:"销量",key:"sale"},
                {title:"审核状态",slot:"verifyStatus"},
                {title:"操作",slot:"action"},
            ],
            data: [],
            sortList: [],
            brandList:[],
            labelList:[
                {
                    value: '1',
                    label: '上架'
                },
                {
                    value: '0',
                    label: '下架'
                },
            ],
            verifyList:[
                {
                    value: '0',
                    label: '未审核'
                },
                {
                    value: '1',
                    label: '审核通过'
                },
                {
                    value: '2',
                    label: '审核拒绝'
                },
            ],
            skcolumns:[
                {title:"编号",slot:"stockCode"},
                {title:"颜色",key:"stockColor"},
                {title:"区分",key:"stockBranch"},
                {title:"销售价格",slot:"stockMoney"},
                {title:"商品库存",slot:"stockNumber"},
                {title:"库存预警",slot:"stockPolice"},
                {title:"操作",slot:"action"},
            ],
            skdata:[],

            columnskc:[
                {title:"库存编号",slot:"stockCode"},
                {title:"颜色",key:"stockColor"},
                {title:"区别",key:"stockBranch"},
                {title:"价格",slot:"stockMoney"},
                {title:"数量",slot:"stockNumber"},
                {title:"库存预警",slot:"stockPolice"},
                {title:"操作",slot:"c"},
            ],
            datakc:[],

            /*columns2:[
                {
                    type: "selection",
                    width: 60,
                    align: "center"
                },
                {title:"库存编号",key:"stockCode"},
                {title:"颜色",key:"stockColor"},
                {title:"区分",key:"stockBranch"},
                {title:"销售价格",key:"stockMoney"},
                {title:"商品库存",key:"stockNumber"},
                {title:"库存预警值",key:"stockPolice"},

            ],*/
            data2:[],
            comVo:{},
            total1:{},
            Stock:{},
            Commodity:{},
            pageSize:5,
            pageNo:1,
            modalstockList:false,
            modalcomList:false,
            modaladd:false,
            modalkc:false,
            stockVo:{},
            kccd:null,
            kcVo:{},
            uploadFlag:false,
            img:null,
            csVo:{},
            uploadForm:{
                id:null,
                pic:null,
            },
            cd:null,
            ruleInline: {
                code: [
                    { required: true, message: '不能为空', trigger: 'blur' },
                ],
                money: [
                    { required: true, message: '不能为空', trigger: 'blur' },
                ],
                number: [
                    { required: true, message: '不能为空', trigger: 'blur' },
                ],
            },
        },
    mounted(){
        this.getList();
        this.getsort();
        this.getbrandList();
    },
    methods: {
        getList(){
            axios.post(`/sys/com/list/${this.pageSize}/${this.pageNo}`,this.comVo).then(
                ({data})=>{
                    this.data=data.result.list;
                    this.total1 = data.result.total;
                }
            )
        },
        delkc(row){
          axios.get("/sys/com/delkc?id="+row.id).then(
              ({data})=>{
                  if(data.code==1000){
                      iview.Message.success(data.msg);
                  }else{
                      iview.Message.error(data.msg);
                  }
                  this.getsk();
              }
          )
        },
        doaddkc(name){
            let a = false;
            for (let i = 0 ; i<name.length;i++) {
                if(name[i].stockCode==null||name[i].stockCode==""|| name[i].stockMoney==null||name[i].stockMoney==""||name[i].stockNumber==""||name[i].stockNumber==""){
                    a = false;
                    break;
                }else{
                    a= true;
                }
            }
            if(a==true){
                this.kcVo.stocks = this.datakc;
                this.kcVo.id = this.Commodity.id;
                axios.post("/sys/com/kcadd", this.kcVo).then(
                    ({data}) => {
                        if(data.code==1000){
                            iview.Message.success(data.msg);
                        }else{
                            iview.Message.error(data.msg);
                        }
                        this.getsk();
                    }
                )
            }else{
                iview.Message.error("输入不能为空");
            }
        },
        aShua() {
            axios.post("/sys/com/aShua", this.stockVo).then(
                ({data}) => {
                    this.datakc = data.result;
                    if(data.cd==0){
                        this.kccd = 100;
                    }else if(data.cd>5){
                        this.kccd = 5*75+100;
                    }else{
                        this.kccd = data.cd*75+100;
                    }
                }
            )
        },
        kcadd(){
            this.datakc=[];
            this.modalkc=true;
            this.kccd = 100;
        },
        getsk(){
            axios.post("sys/com/sk",this.Stock).then(
                ({data})=>{
                    this.skdata = data.result;
                    if(data.cd==0){
                        this.cd = 100;
                    }else{
                        this.cd = data.cd*60+45;
                    }
                }
            )
        },
        getbrandList(){
          axios.post("sys/brand/brandlist").then(
              ({data})=>{
                  this.brandList = data.result;
              }
          )
        },
        getsort(){
          axios.post("/sys/cla/sortlist").then(
              ({data})=>{
                  this.sortList = data.result;
              }
          )
        },
        comList(row,index){
           /* axios.get(`/sys/com/comList?id=`+row.id).then(
                ({data})=>{
                    this.modalcomList=true;
                    this.Commodity=row;
                }
            )*/
            window.location.href="/sys/com/comList?id="+row.id;

        },
        docomList(){
            let _this = this;
            iview.Modal.confirm({
                title:"确定是否要修改?",
                content:"确定或者取消",
                onOk(){
                    axios.post("/sys/com/update3",this.Commodity)
                        .then(({data})=>{
                            iview.Message.success({content:data.msg});
                            _this.getList();
                        })
                },
                onCancel(){
                    iview.Message.info("取消修改")
                }
            })
        },
        stockList(row){
           this.Stock.commodityId = row.id;
           this.getsk();
           this.modalstockList = true;
           this.Commodity = row;
        },
        /*dostockList(){
            let _this = this;
            iview.Modal.confirm({
                title:"确定是否要修改?",
                content:"确定或者取消",
                onOk(){
                    axios.post("/sys/com/update",this.Stock)
                        .then(({data})=>{
                            iview.Message.success({content:data.msg});
                            _this.getstockList();
                        })
                },
                onCancel(){
                    iview.Message.info("取消修改")
                }
            })

        },*/
        edit(row,index){
         this.Commodity=row;
         this.img=null;
         this.clearFiles();
         this.modalcomList=true
        },
        doedit(){
            axios.post("/sys/com/update2",this.Commodity)
                .then(({data})=>{
                    iview.Message.success({content:data.msg});
                    this.getList()
                })
        },
        change (row,index) {
            this.Commodity=row;
            axios.post("/sys/com/update4",this.Commodity)
                .then(({data})=>{
                        iview.Message.success({content:data.msg});
                        this.getList()
                })
        },


        add(){
            /*this.Commodity={};
            this.modaladd=true;*/
            window.location.href="/sys/com/comadd";
        },
        // upload(row){
        //     this.uploadFlag = true;
        //     this.uploadForm.id=row.id;
        // },
        /*预览*/
        handlerBeforeUpload(file){
            console.log(file);
            const ct = new FileReader();
            ct.readAsDataURL(file);//读取本地文件
            ct.onloadend=()=>{
                this.img = ct.result;
            }
            this.clearFiles();
        },
        uploadSuccess(response){
            console.log(response);
            iview.Message.success("上传yes");
            this.Commodity.pic=response.result.attachPath;
        },
        uploadAttach(){
            axios.post("/sys/user/uploadAttach",this.uploadForm)
                .then(({data})=>{
                    this.uploadFlag=false;
                    iview.Message.success(data.msg);
                    this.getuserlist();
                })
        },
        del(row,index){
            let _this = this;
            if(row.publishStatus==1){
                iview.Message.info(row.name+"商品未下架不能删除");
            }else{
                iview.Modal.confirm({
                    title:"确定是否要删除?",
                    onOk(){
                        axios.get("/sys/com/delete?id="+row.id)
                            .then(({data})=>{
                                iview.Message.success({content:data.msg});
                                if(index==0){
                                    if(_this.pageNo!=1){
                                        _this.pageNo=_this.pageNo-1;
                                    }
                                };
                                _this.getList();
                                _this.getsort();
                                _this.getbrandList()

                            })
                    },
                    onCancel(){
                        iview.Message.info("取消删除")
                    }
                })
            }

            /*axios.post("/sys/com/update4",this.Commodity)
                .then(({data})=>{
                    this.Commodity=row;
                    }
                )*/
        },
        exa(row){
            window.location.href="/sys/com/exa?id="+row.id;
        },
        skupdate(row){
            this.Stock = row;
            axios.post("/sys/com/skupdate",this.Stock).then(
                ({data})=>{
                    iview.Message.success({content:data.msg})
                    this.getList();
                }
            )
        },
        noupdate(){
            iview.Message.info("已取消");
            this.getList();
            this.getsort();
            this.getbrandList()
        },
        clearFiles () {
            this.$refs['upload'].clearFiles();
        },
        recovery(){
            window.location.href="/sys/com/recovery";
        },
        delkck(row,index){
            this.csVo.stocks = this.datakc;
            this.csVo.stock = row;
            axios.post("/sys/com/del",this.csVo).then(
                ({data})=>{
                    this.datakc = data.result;
                }
            )

        }
    }
 })
</script>
</html>
